<template>
	<view>
		<u-navbar :titleStyle="{color: titleColor, fontWeight: 'bold', letterSpacing: '2rpx', fontSize: '36rpx'}" :bgColor="bgColor" :title="title" leftIconSize="0">
			<!-- <u--image slot="left" mode="aspectFill" :src="appInfo.logo[0].url" width="64rpx" height="64rpx"></u--image> -->
		</u-navbar>
		<scroll-view @scroll="handleScroll" :scroll-y="true" :style="{height: scrollViewHeight}">
			<view class="home-header" :style="{height: header.height}">
				<image class="home-header-image" :src="appInfo.images[0].url" mode="aspectFill" 
				:style="{width: '100%', height: header.height,transform: `scale(${scaleX}, ${scaleY}) translate(${translateX}, ${translateY})`}"
				></image>
				<view class="home-header-title">
					<view class="home-header-title1">趣游{{appInfo.name}}</view>
					<view style="height: 8rpx;"/>
					<view class="home-header-title2">静下心来，发现生活的美好</view>
					<view style="height: 16rpx;"/>
				</view>
			</view>
			<u-notice-bar fontSize="14"  :speed="60" :bgColor="appColor+'0D'" :color="appColor" :text="notice" />
			<view class="home-diamond">
				<u-row gutter="16" :customStyle="`margin-bottom: ${rowIndex === diamondList.length-1 ? 0 : '32rpx'}`" v-for="(row, rowIndex) in diamondList" :key="rowIndex">
					<u-col span="3" v-for="(col, colIndex) in row" :key="colIndex">
						<view class="home-diamond-item" @click="toPage(col)">
							<ColorIcon :icon="col"/>
						</view>
					</u-col>
				</u-row>
				<view class="diamond-1">
					<view style="height: 48rpx;"/>
					<HomeTitle title="景区导览" subTitle="内含81个景点的语音讲解服务"/>
					<view class="diamond-1-img" @click="toPage({path: '/pageDiamond1/visitMap/index'})">
						<!-- https://doublelonghu.oss-cn-beijing.aliyuncs.com//temp/33191663315042_.pic_1663315141131.jpg -->
						<u--image mode="aspectFill" :src="appInfo.guide && appInfo.guide[0].url" width="100%" height="260rpx"></u--image>
						<view class="diamond-1-img-text" :style="{backgroundColor: appColor+'CC'}">
							<text>开始游玩</text>
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>
				</view>
				<view class="diamond-1">
					<view style="height: 48rpx;"/>
					<HomeTitle title="景区活动"/>
					<view style="height: 16rpx;"/>
					<view @click="toWebiew(item)" :style="{marginBottom: index === parkIntroduce.length-1 ? '0' : '16rpx'}" class="diamond-2-img" v-for="(item, index) in parkIntroduce" :key="index">
						<view class="diamond-3-img">
							<u--image mode="aspectFill" :src="item.image[0].url" width="100%" height="200rpx"></u--image>
						</view>
						<view class="diamond-3-img-title u-line-1">{{item.title}}</view>
						<view class="diamond-3-img-sub-title u-line-2">{{item.introduce}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import HomeTitle from '@/components/homeTitle';
	import {mapState, mapActions} from 'vuex';
	import JoyVideo from '@/components/joyVideo';
	import ColorIcon from '@/components/colorIcon';
	import {chunkArr} from '@/utils/index.js';
	import {getTickets} from '@/api/home.js';
	export default {
		components: {
			HomeTitle,
			JoyVideo,
			ColorIcon
		},
		data() {
			return {
				title: '',
				titleColor: '#fff',
				bgColor: 'transparent',
				header: {
					// bgc: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/header-bgc.png',
					height: '560rpx',
				},
				scaleX: 1,
				scaleY: 1,
				translateX: 0,
				translateY: 0,
			}
		},
		computed: {
			...mapState(['appInfo', 'parkIntroduce', 'userInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 50 - 1 + this.statusBarHeight + 'px';
				// return this.scrollHeight - 44 - 50 - 1 + 'px';
			},
			statusBarHeight1() {
				return this.statusBarHeight + 8 + 'px'
			},
			diamondList() {
				let icons = [
					{icon: 'icon-siyecao', title: '景区故事', color: '#ffba00', path: '/pageDiamond1/story/index'},
					{icon: 'icon-jingqu', title: '景区概况', color: '#ff6eb4', path: '/pageDiamond1/scenicArea/index'},
					{icon: 'icon-6', title: '预订门票', color: '#ee1289', path: '/pageDiamond1/tickets/index'},
					{icon: 'icon-jifen', title: '积分商场', color: '#ffba00', path: '/pages/me/points', isLogin: true},
					// {icon: 'icon-zizhutuiguang', title: '景区公告', color: '#f883f8', path: '/pageDiamond1/notice/index'},
					{icon: 'icon-tudi', title: '地块地图', color: '#ee1289', path: '/pageDiamond1/plotMap/index', isLogin: true},
					{icon: 'icon-siyecao', title: '花海世界', color: '#71A66B', path: '/pageDiamond1/flowers/index'},
					// {icon: 'icon-tingchechang1', title: '停车缴费', color: '#ff6eb4', path: '/pageDiamond1/parking/index', isLogin: true},
					// {icon: 'icon-gxunjians', title: '块地巡地', color: '#ee1289', path: '/pageDiamond1/routingInspection/index', isLogin: true},
					{icon: 'icon-tousujianyi', title: '投诉建议', color: '#ff8e58', path: '/pageDiamond1/complaint/index'},
				];
				if(this.userInfo && this.userInfo.isTicketManagement) {
					icons.push({icon: 'icon-saoyisao', title: '核销票券', color: '#ff8e58', path: '/pageDiamond1/complaint/index', isLogin: true, isClick: true},)
				}
				return chunkArr(icons, 4);
			},
			notice() {
				let releaseNotice = this.$store.state.releaseNotice;
				if(releaseNotice && releaseNotice.title) {
					return `${releaseNotice.title}: ${releaseNotice.content}`
				}
				return '通知: 暂无通知内容～'
			}
		},
		mounted() {
			const headerAnimation = () => {
				setTimeout(()=>{
					this.scaleX = 1.2;
					this.scaleY = 1.2;
				},2000)
				setTimeout(()=>{
					this.translateX = '-20px';
					this.translateY = 0;
				},10000)
				setTimeout(()=>{
					this.translateX = 0;
					this.translateY = 0;
				},20000)
				setTimeout(()=>{
					this.scaleX = 1;
					this.scaleY = 1;
				},30000)
			}
			headerAnimation()
			setInterval(()=>{
				headerAnimation()
			},40000)
		},
		methods: {
			...mapActions(['setDetail', 'setUserInfo']),
			// toWebiew
			toWebiew(detail) {
				this.setDetail({detail});
				uni.navigateTo({
					url: '/pageDiamond1/webview'
				})
			},
			// 跳转
			toPage({path, isLogin, isClick}) {
				const that = this;
				if(!path) return;
				if(isLogin) {
					if(isClick) {
						uni.scanCode({
							onlyFromCamera: true,
							scanType: ['qrCode'],
							success: function(res) {
								if (res.result) {
									try{
										const result1 = JSON.parse(res.result);
										that.$cuLoading('查询中...').then(() => {
											getTickets(result1).then((res) => {
												const {code, success, result} = res;
												if(code === 200 && success) {
													that.setDetail({detail: Object.assign(result, {codeId: result1.id, type: result1.type})});
												} else {
													that.setDetail({});
												}
												that.$cuNavigateTo('/pageDiamond1/scan/index')
											}).finally(() => {
												uni.hideLoading();
											});
										})
									}catch(e){
										that.$cuTip('非正常二维码');
										//TODO handle the exception
									}
								}
							}
						});
					} else {
						this.$cuNavigateTo(path);
					}
				} else {
					uni.navigateTo({
						url: path
					})
				}
			},
			// 预览图片
			previewImg(current, urls) {
				urls = urls.map(item => item.url);
				uni.previewImage({
					current,
					urls,
				});
			},
			handleScroll({detail}) {
				if (detail.scrollTop > 100) {
					this.titleColor = '#000';
					this.bgColor = '#fff';
					this.title = '花儿朵朵'
				} else {
					this.titleColor = '#fff';
					this.bgColor = 'transparent';
					this.title = ''
				}
			},
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.home-header {
		overflow: hidden;
		position: relative;
		.home-header-image {
			transition: all 5s;
			position: absolute;
			left: 0;
			top: 0;
		}
		.home-header-title {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			padding: 16rpx 32rpx;
			background-image: linear-gradient(to top, rgba(0,0,0, .5), rgba(0,0,0, 0));
			// box-shadow: inset 0px 0px 90px 1px rgba(0, 0, 0, 0.2);
			.home-header-title1 {
				font-size: 42rpx;
				color: #fff;
				font-weight: bold;
			}
			.home-header-title2 {
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
	.home-diamond {
		border-radius: 16rpx 16rpx 0 0;
		padding: 32rpx;
		background-color: #fff;
		.home-diamond-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.diamond-1 {
			.diamond-1-img {
				height: 260rpx;
				border-radius: 16rpx;
				overflow: hidden;
				position: relative;
				.diamond-1-img-text {
					padding: 16rpx 20rpx 16rpx 32rpx;
					color: #fff;
					font-size: 28rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
			.diamond-2-img {
				background-color: #fff6ed;
				border-radius: 16rpx;
				overflow: hidden;
				padding: 16rpx;
			}
			.diamond-3-img {
				border-radius: 16rpx;
				height: 200rpx;
			}
			.diamond-3-img-title {
				color: #333;
				font-weight: bold;
				font-size: 32rpx;
				margin: 8rpx 0;
			}
			.diamond-3-img-sub-title {
				color: #333;
				font-size: 28rpx;
			}
		}
	}
</style>
